<template>
  <div class="subpage">
    <div class="banner"></div>
    <div class="subjectinfo">
      <div class="subinfo">
        <div class="back" @click="goBack">返回上一页 >></div>
        <div class="subbox">
          <ul class="clearfix" v-if="hasModeData">
            <li class="typeitem" v-for="(mode,index) in modeList" :key="index">
                <img :src="fileUrl + mode.head_img" class="image">
                <p style="color: black; font-weight: bold">{{mode.name}}</p>
                <div style="margin-top: 5px;line-height:35px;">
                  <i class="el-icon-user-solid">{{mode.study_number}}人</i>
                  <el-button style="float: right" @click="goModeDetail(mode)" type="text">开始练习</el-button>
                </div>
            </li>
          </ul>
          <div class="page" v-if="hasModeData">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="totalCount">
              </el-pagination>
          </div>

          <div v-else class="boxno" style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;">
            <img src="/static/image/noData.jpg" alt="" style="display: block">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

 /* import treeMenu from '@/components/tree-menu'*/
  import courseMenu from '@/components/course-menu'
  export default {
    name: 'courseList',
    components: {courseMenu},
    data () {
      return {
        isCollapse: true,
        userInfo: {},
        pageSize: 8,
        sub: '',
        hasModeData: true,
        modeType: '',
        subjectId: '',
        courseId: '',
        modeList: [],
        fileUrl: this.$store.state.fileHost,
        currentPage: 1,
        totalCount: 0
      }
    },

    mounted () {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.subjectId = parseInt(this.$route.query.subjectId)
      this.getCourseBySubjectId()
    },

    methods: {

      goModeDetail (data)  {
        let courseOrPaperInfo = {
          courseId: data.id,
          name: data.name,
          paperId: '',
          examId: ''
        }
        this.$store.commit('updateCourseOrPaperInfo', courseOrPaperInfo)
        this.$router.push({
          name: 'courseDetail',
        })
      },


      handleCurrentChange(val) {
        this.currentPage = val
        this.getCourseBySubjectId()
      },

      getCourseBySubjectId () {
        let that = this
        that.axios.get(that.$httpApi.httpUrl('/student/course/getCourseList'), {
          params: {
            subjectId: that.subjectId,
            offset: (that.currentPage - 1) * that.pageSize,
            limit: that.pageSize
          }
        }).then(function (response) {
          that.modeList = response.data.data.dataList
          if (!that.modeList || that.modeList.length === 0) {
            that.hasModeData = false
          } else {
            that.hasModeData = true
          }
          that.totalCount = response.data.data.total
        })
      },

    }
  }
</script>

<style lang='scss' scoped>
  .subpage{
    .banner{
      width: 100%;
      height: 360px;
      background: url('/static/image/bannerpic.png') no-repeat;
      background-size:100% 100%;
      background-position: center;
    }
    .subjectinfo{
      width: 1200px;
      margin: 0 auto;
      background-color: #ca0000;
      padding: 10px;
      display: flex;
      margin-top: 20px;
      margin-bottom: 20px;
      }
      .subinfo{
        flex: 1;
        height: 100%;
        background-color: #fff;
        padding: 10px;
        .back{
          width: 100%;
          text-align: right;
          color:#ca0000;
        }
        .subbox{
          width: 100%;
          min-height: 500px;
          .page{
            width: 100%;
            text-align: center;
          }
       }
      }
  }

  .back:hover {
    cursor: pointer;
    color: red;
  }

  .typeitem:hover {
    cursor: pointer;
   /* box-shadow: #e3e3e3 0px 0px 10px;*/
  }

  .typeitem p {
    text-overflow: -o-ellipsis-lastline;
    margin-top: 12px;
    overflow: hidden;
    text-overflow: ellipsis;display:
    -webkit-box;-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .subbox ul {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
  .subbox{
    width: 100%;
    min-width: 500px;
    position: relative;
    box-sizing: border-box;
    .page {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      text-align: center;
    }
  }

  .subbox li {
    box-sizing: border-box;
    width: 192px;
    min-height: 160px;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    text-align: left;
    &:hover{
      opacity: 0.7;
      .course_title{
        color:#ca0000;

      }
    }
    img{
      width: 100%;
      height:108px;
      display: block;
      border-radius: 8px;
    }
    .course_title{line-height: 36px;font-weight: 500;color:#000000;font-size: 18px;
      padding: 0 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; // 作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 2; // 显示的行
    }
  }

</style>
